import 'package:flutter/material.dart';
import 'package:flutterapp/src/page/demo/banner_widget1.dart';
import 'package:flutterapp/src/page/demo/home_item_tabbar_page.dart';

class HomeItemDemoPage extends StatefulWidget {
  @override
  _HomeItemDemoPageState createState() => _HomeItemDemoPageState();
}

// SingleTickerProviderStateMixin 屏幕刷新监听
class _HomeItemDemoPageState extends State<HomeItemDemoPage>
    with SingleTickerProviderStateMixin {
  List<String> banner = [
    "assets/images/banner1.png",
    "assets/images/banner2.png",
    "assets/images/banner3.png"
  ];
  List<String> tabs = ["推荐", "关注", "热点"];
  double _headerOpacity = 0.0;
  ScrollController _scrollController = new ScrollController();
  TabController _tabController;
  void initState() {
    super.initState();
    // 初始化tabController
    _tabController = new TabController(length: tabs.length, vsync: this);
    // 创建一个滑动监听
    _scrollController.addListener(() {
      double offset = _scrollController.offset;
      if (offset < 160) {
        _headerOpacity = offset / 160;
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              expandedHeight: 244,
              // //值为true时 标题会停留
              pinned: true,
              title: Opacity(
                opacity: _headerOpacity,
                child: Text("demo"),
              ),
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  height: 200,
                  child: Banner1Wiget(list: banner),
                ),
              ),
              bottom: PreferredSize(
                preferredSize: Size(MediaQuery.of(context).size.width, 44),
                child: Material(
                  color: Colors.white,
                  child: TabBar(
                    labelStyle: TextStyle(fontSize: 20),
                    controller: _tabController,
                    tabs: tabs.map((v) => Tab(text: v)).toList(),
                  ),
                ),
              ),
            ),
          ];
        },
        body: buildBody(),
      ),
    );
  }

  buildBody() {
    return TabBarView(
        controller: _tabController,
        children: tabs.map((v) => HomeItemTabbarPage()).toList());
  }
}
